<!DOCTYPE HTML>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>首页-摊位/市场租赁平台</title>
    <script type="text/javascript" th:src="@{/asserts/js/jQuery-3.6.0.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/reset.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/global.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/web.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/k15.css}"/>
    <script th:src="@{/asserts/js/vue.js}"></script>
    <script th:src="@{/asserts/js/axios.min.js}"></script>



    <style type="text/css">
        #mask{
            margin: 0px auto;
            width: 600px;      /*盒子宽度和高度跟图片一致 */
            height: auto;
        }
        .left,.right{
            width: 50px;
            height: 50px;
        }
        .left{
            position: relative;
            top: -250px;
        }
        .right{
            position: relative;
            top: -250px;
            left: 300px;
            float: left;
        }
        div div div span{
             font-size: 13px;
             color: mediumpurple;
         }
    </style>
</head>
<body  class="W-body">

<!-- 视图区 -->
<div id="app">
    <div class="in-wrap" style="height: auto">

        <header th:replace="~{commons/tag::headerBar}"></header>

        <div id="mask">
            <!-- 鼠标经过时自动播放图片 -->
            <img width="700px" height="400px" :src="imgArr[index]" v-on:mouseover="stop" v-on:mouseout="change">
        </div>

        <div id="aCoursesList" style="background-color: #fafafa">
            <div class="bg-fa of">
                <section class="container">
                    <header class="comm-title">
                    <span class="fr mt5"><a href="javascript:void(0)" title="换一换" class="c-master"
                                            onclick="">换一换</a></span>
                        <h2 class="fl tac">
                            <span class="c-333">为你推荐</span>
                        </h2>
                    </header>
                    <article class="comm-course-list">
                        <ul class="of" id="weinituijian">

                        </ul>
                        <div class="clear"></div>
                    </article>
                </section>
            </div>
            <!-- /为你推荐 结束 -->
            <!-- /推荐摊位 开始 -->
            <div>
                <section class="container" id="app">
                    <header class="comm-title">
                        <h2 class="tac">
                            <span class="c-333">推荐摊位</span>
                        </h2>
                    </header>
                    <div>
                        <section class="c-tab-title">
                            <a href="javascript:void(0)" title="精品摊位" class="fine">精品摊位</a>
                            <a href="javascript:void(0)" title="最新摊位" class="newest">最新摊位</a>
                            <a href="bidding.html" title="全部摊位" class="all">正在竞拍</a>
                        </section>
                    </div>
                    <div>
                        <article class="comm-course-list">
                            <ul class="of">
                                <li th:each="r : ${pageInfo.list}">
                                    <section class="i-q-l-wrap">
                                        <div>
                                            <img th:src="'http://localhost:8888/img/'+${r.stallImg}" width="220px" height="180px" class="picImg" >
                                        </div>
                                        <section class="hLh20 of">
                                            <a onclick="noOpen()" th:text="${r.stallName}" style="font-size: 15px;color: red"></a><span class="fl">摊位名：</span>
                                        </section>
                                        <section>
                                            <span class="fl">摊位介绍：</span>
                                            <p class="c-master fsize14" th:text="${r.introduce}"></p>
                                        </section>
                                        <br/>
                                        <section class="hLh20 of">
                                            <span class="fr" th:text="${#dates.format(r.pStartauctionTime, 'yyyy-MM-dd HH:mm:ss')}"></span><span class="fr">起拍时间：</span>
                                            <span class="fsize16 c-666"></span>
                                        </section>
                                        <section class="i-q-txt">
                                            <p>
                                                <span class="fr">元</span><span class="fr" th:text="${r.pStartauctionPrice}"></span><span class="fr">起拍价：</span>
                                            </p>
                                        </section>
                                        <section class="i-q-txt">
                                            <p>
                                                报名人数：<span th:text="${r.pAuctionuserCount}"></span> 人<button style="border: #3FACEA" class="fr">即将开拍</button>
                                            </p>
                                        </section>
                                    </section>
                                </li>
                            </ul>
                            <div class="clear"></div>
                        </article>
                        <!--<section class="tac pt20">
                            <a href="#" title="全部摊位"
                               class="comm-btn c-btn-2">全部摊位</a>
                        </section>-->
                    </div>
                </section>
            </div>
            <!-- /推荐摊位 结束 -->

            <hr style="width: 60%"/>

            <!-- /竞拍详情 开始-->
            <div>
                <section class="container" id="app">
                    <header class="comm-title">
                        <h2 class="tac">
                            <span class="c-333">竞拍进行中</span>
                        </h2>
                    </header>

                  <article class="comm-course-list">
                        <ul class="of" id="bna">
                           <li th:each="a : ${auctionStallList}">
                                <div>
                                    <a th:href="@{/auctionStall/auctioning(stallId=${a.stallId})}">
                                    <section class="i-q-l-wrap" >
                                        <div>
                                            <img th:src="'http://localhost:81/img/marketStall/'+${a.stallImg}" width="220px" height="240px" class="picImg" >
                                        </div>
                                        <section class="hLh20 of">
                                            <span  class="fsize14 c-999 ml5 f-fA" th:text="${a.marketName}">{{a}}摊位：</span>
                                            <p></p>

<!--                                            <span class="fsize16 c-666">-->
<!--												 	</span>-->
                                        </section>
                                        <section class="hLh20 of mt10">

                                            <span class="fl">起拍时间 :</span>&nbsp;&nbsp;&nbsp;&nbsp;
                                            &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="fl" th:text="${#dates.format(a.pStartauctionTime , 'yyyy-MM-dd')}"></span>
                                        </section>

                                        <section class="hLh20 of mt10">
                                            <a class="c-master fsize14" th:text="${a.stallName}"></a>
                                        </section>
                                        <section class="i-q-txt">
                                            <p>
                                                起拍价 <span style="font-size: 20px ;color: red" class="c-999 f-fA txtOf" th:text="${a.pStartauctionPrice}"></span>
                                            </p>
                                        </section>
                                        <section class="i-q-txt">
                                            <p>
                                                <span >参加人数： 99+ <button style="border: #3FACEA">正在竞拍</button></span>
                                            </p>
                                        </section>
                                    </section>
                                    </a>
                                </div>

                            </li>

                        </ul>
                        <div class="clear"></div>
                    </article>

                </section>
            </div>

            <!-- /竞拍详情 结束-->
            <hr style="width: 60%"/>

            <!-- /招商详情 开始-->
            <div>
                <section class="container" id="app">
                    <header class="comm-title">
                        <h2 class="tac">
                            <span class="c-333">招商摊位</span>
                        </h2>
                    </header>
                    <div>
                        <article class="comm-course-list">
                            <ul class="of">
                                <li th:each="r : ${rentInfo.list}">
                                    <section class="i-q-l-wrap">
                                        <div>
                                            <img th:src="'http://localhost:8888/img/'+${r.stallImg}" width="220px" height="180px" class="picImg" >
                                        </div>
                                        <section class="hLh20 of">
                                            <a th:href="@{'/index/rentStall?sid='+${r.stallId}}" th:text="${r.stallName}" style="font-size: 15px"></a><span class="fl">摊位名：</span>
                                        </section>
                                        <section>
                                            <span class="fl">摊位介绍：</span>
                                            <p class="c-master fsize14" th:text="${r.introduce}"></p>
                                        </section>
                                        <br/>
                                        <section class="i-q-txt">
                                            <p>
                                                <span class="fr">元/月</span><span class="fr" th:text="${r.rentPrice}"></span><span class="fr">租金：</span>
                                            </p>
                                        </section>
                                        <section class="i-q-txt">
                                            <p>
                                                摊位面积：<span th:text="${r.area}"></span>m² <button style="border: #3FACEA" class="fr">火热招商中</button>
                                            </p>
                                        </section>
                                    </section>
                                </li>
                            </ul>
                            <div class="clear"></div>
                        </article>
                        <section class="tac pt20">
                            <a href="#" title="全部招商"
                               class="comm-btn c-btn-2">全部招商</a>
                        </section>
                    </div>
                </section>
            </div>
            <!-- /招商详情 结束-->

        </div>
        <!-- 公共底引入 -->
        <footer th:replace="~{commons/tag::footBar}"></footer>
    </div>
</div>
<script>
    function noOpen(){
        alert("该摊位还未开始竞拍哦，敬请期待~~")
    }
</script>

<script type="text/javascript">



    var app = new Vue({
        el: '#app',
        data: {
                auctionStallList:[],
                testList:{a:1,b:2,c:3,d:4,e:5,f:6,g:7,h:8},
                imgArr:[
                    "../asserts/img/lbt1.jpg",
                    "../asserts/img/lbt2.jpg",
                    "../asserts/img/lbt3.jpg",
                    "../asserts/img/lbt4.jpg",
                ],
                    index:0

        },
        methods:{
            next(){
                this.index++;
                if(this.index===4){
                    this.index=0
                }
            },
            change(){
                this.timer=setInterval(this.next,2000);
            },
            stop(){
                clearInterval(this.timer)
            },



        },
        created(){

        }


    });

</script>
</body>
</html>
